<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>对象语法</title>
	<style type="text/css">
		.active{
			background: red;
		}
		.text-danger{
			color: yellow;
		}
	</style>
</head>
<body>
	<!-- 绑定 HTML Class -->
	<div id="app">
		<!-- <div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }">111</div> -->
		<div class="static" v-bind:class="classObject">111</div>
	</div>
	<script type="text/javascript" src="../js/vue.js"></script>
	<script type="text/javascript">
		var vm = new Vue({
			el: "#app",
			// data: {
			//   	isActive: true,
			//   	hasError: true
			// },











			/*可以将要显示的class放在一个对象里*/
			// data: {
			//   	classObject: {
			//     	active: true,
			//     	'text-danger': true
			// 	}
			// }










			/*通过computed计算*/
			data: {
			  	isActive: true,
			  	error: null
			},
			computed: {
			  	classObject: function () {
				    return {
				      	active: this.isActive && !this.error,
				      	'text-danger': this.error && this.error.type === 'fatal'
				    }
			  }
			}
		})
	</script>



	<!-- 数组语法 -->
	<div id="app1">
		<div v-bind:class="[activeClass, errorClass]">2222</div>
		<div v-bind:class="[isActive ? activeClass : '', errorClass]">333</div>
	</div>
	<script type="text/javascript">
		var vm1 = new Vue({
			el: "#app1",
			data: {
				isActive: false,
			  	activeClass: 'active',
			  	errorClass: 'text-danger'
			}
		})
	</script>







	<!-- 绑定内联样式 -->
	<!-- 对象语法 -->
	<div id="app2" v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">444</div>
	<script type="text/javascript">
		var vm2 = new Vue({
			el: "#app2",
			data: {
			  	activeColor: 'red',
			  	fontSize: 30
			}
		});
	</script>

</body>
</html>